<script setup lang="ts">
import {ref} from "vue";

const urlList = ref<{ url: string, name: string }[]>([
  // 1. VideoPreview (MP4视频)
  {
    url: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4',
    name: '.VideoPreview'
  },
  
  // 2. AudioPreview (MP3音频)
  {
    url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
    name: '.AudioPreview'
  },

  // 3. ExcelPreview (XLSX表格)
  {
    url: 'https://sample-videos.com/xls/Sample-Spreadsheet-10-rows.xls',
    name: '.ExcelPreview'
  },

  // 4. FilesPreview (ZIP压缩包)
  {
    url: 'https://github.com/axios/axios/archive/refs/tags/v1.6.7.zip',
    name: '.FilesPreview'
  },

  // 5. OfficePreview (DOC文档)
  {
    url: 'https://www.unicef.org/sites/default/files/2022-12/SOWC-2023-Executive-Summary-EN.doc',
    name: '.OfficePreview'
  },

  // 6. PDFPreview (PDF文档)
  {
    url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    name: '.PDFPreview'
  },

  // 7. PicturePreview (JPG图片)
  {
    url: 'https://picsum.photos/id/237/800/600.jpg',
    name: '.PicturePreview'
  },

  // 8. PPTPreview (PPT幻灯片)
  {
    url: 'https://file-examples.com/wp-content/uploads/2017/08/file_example_PPT_1MB.ppt',
    name: '.PPTPreview'
  },

  // 9. WordPreview (DOCX文档)
  {
    url: 'https://file-examples.com/wp-content/uploads/2017/02/file-sample_1MB.docx',
    name: '.WordPreview'
  },

  // 10. XMindPreview (XMind文件)
  {
    url: 'https://www.xmind.net/xmind/download/7tq6r2',
    name: '.XMindPreview'
  }
])

const active = ref(-1)
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in urlList" :key="item.url" @click="active = index" :class="{active: active === index}" v-preview="item">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>
ul {
  list-style: none;
  text-align: left;
  li{
    margin-bottom: 10px;
    &:hover{
      color: #409eff;
      cursor: pointer;
    }
    &.active{
      color: #409eff;
    }
  }
}
</style>
